<template>
    <div class="contact">
        <HEader></HEader>
        <div class="headers">
            <div>
                <img src="../../../static/img/logo_1.png" alt="">
            </div>
            <h2>联系方式</h2>
        </div>
        <div class="map">
            <img src="../../../static/img/map.jpg" alt="">
        </div>
        <div class="contacts"> 
            <h3 v-for="(companys, index) in contactList.company.value" :key="index">{{companys}}</h3>
            <div class="phone">
                <div class="image">
                    <img src="../../../static/img/phone.jpg" alt="">
                </div>
                <div class="phones">
                    <h5>
                        {{this.contactList.phone.name}}:
                    </h5>
                    <p v-for="(phones, index) in contactList.phone.value" :key="index">{{phones}}</p>
                </div>
            </div>
            <div class="email">
                <div class="image">
                    <img src="../../../static/img/email.jpg" alt="">
                </div>
                <div class="emails">
                    <h5 v-for="(title,index) in contactList.email.name" :key="index">{{title}}</h5>:
                    <p v-for="(emails, indexs) in contactList.email.value" :key="indexs">{{emails}}</p>
                </div>
            </div>
            <div class="address">
                <div class="image">
                    <img src="../../../static/img/address.jpg" alt="">
                </div>
                 <div class="addresss">
                    <h5 v-for="(title,index) in contactList.address.name" :key="index">{{title}}</h5>:
                    <p v-for="(addresss, index) in contactList.address.value" :key="index">{{addresss}}</p>
                </div>
            </div>
        </div>
        <Interactive></Interactive>
        <Footer></Footer>
    </div>
</template>
<script>
import HEader from '../productVideo/components/Header'
import Interactive from '../interactive/Interactive'
import Footer from '../home/components/Footer'
export default {
    name: 'Contact',
    data(){
        return {
            contactList: {
                phone:{
                    name: "",
                    value: [""]
                },
                email:{
                    name: "",
                    value: [""]
                },
                address:{
                    name: "",
                    value: [""]
                },
                company:{
                    name: "",
                    value: [""]
                }
            }
        }
    },
    created(){
        this.axios.get('/settings/all')
        .then((res) => {
            this.contactList = res.data;
            this.contactList.phone.name = res.data.phone.name;
            
            console.log(res.data)
        })
        .catch((error) => {
            console.log(error);
        })
    },
    components: {
        HEader,
        Footer,
        Interactive
    }
}
</script>
<style scoped>
.contact{
    width: 100%;
    height: auto;
    padding-bottom: .97rem;
}
.contact .headers{
    width: 100%;
    height: .6rem;
    background-color: #1d2977;
    line-height: .6rem;
}
.contact .headers div{
    width: .53rem;
    height: .53rem;
    float: left;
    margin-left: .1rem;
}
.contact .headers div img{
    width: 100%;
    height: auto;
}
.contact .headers h2{
    font-size: .3rem;
    color: #fff;
    float: left;
    font-weight: bold;
}
.contact .map{
    width: 100%;
    height: 4.5rem;
    margin-top: .3rem;
}
.contact .map img{
    width: 100%;
    height: auto;
}
.contact .contacts{
    width: 6.7rem;
    height: auto;
    margin-top: .4rem;
    margin-left: .5rem;
    margin-bottom: 2rem;
}
.contact .contacts h3{
    color: #1d2977;
    font-size: .36rem;
}
.contact .contacts .phone{
    width: 100%;
    height: auto;
    margin-top: .4rem;
}
.contact .contacts .phone .image{
    width: .5rem;
    height: .5rem;
    display: inline-block;
    vertical-align: top;
}
.contact .contacts .phone .image img{
    width: 100%;
    height: auto;
}
.contact .contacts .phones{
    display: inline-block;
    color: #333;
    width: 5.7rem;
    padding-top: .06rem;
}
.contact .contacts .phones h5{
    display: inline-block;
}
.contact .contacts .phones p{
    display: inline-block;
    margin-left: 1.26rem;
    width: 4rem;
}
.contact .contacts .phones>p:nth-child(2){
    margin-left: .05rem;
}
.contact .contacts .email{
    width: 100%;
    height: auto;
    margin-top: .4rem;
}
.contact .contacts .email .image{
    width: .53rem;
    height: .53rem;
    display: inline-block;
    vertical-align: top;
}
.contact .contacts .email .image img{
    width: 100%;
    height: auto;
}
.contact .contacts .email .emails{
    width: 5.7rem;
    display: inline-block;
    padding-top: .06rem;
}
.contact .contacts .email .emails h5{
    display: inline-block;
}
.contact .contacts .email .emails p{
    display: inline-block;
}
.contact .contacts .address{
    width: 6.7rem;
    height: auto;
    margin-top: .4rem;
}
.contact .contacts .address .image{
    width: .53rem;
    height: .53rem;
    display: inline-block;
    vertical-align: top;
}
.contact .contacts .address .image img{
    width: 100%;
    height: auto;
}
.contact .contacts .address .addresss{
    width: 5.7rem;
    display: inline-block;
    padding-top: .06rem;
}
.contact .contacts .address .addresss h5{
    display: inline-block;
}
.contact .contacts .address .addresss p{
    display: inline;
}
@media screen and (min-width: 319px) and (max-width: 321px){
.contact .contacts .phones p{
    margin-left: 1.5rem;
}
}
@media screen and (min-width: 359px) and (max-width: 361px){
.contact .contacts .phones p{
    margin-left: 1.35rem;
}
}
</style>
